<template>
	<view class="page">
		<!-- 用户 -->
		<view class="user">
			<image src="../../static/tarbar/头像.jpg" alt="" class="img">
			<text>{{ name }}</text>
			<view >
				<uni-icons type="location-filled" size="30"  color="white" class="textIco"></uni-icons>
				<text class="textAdd">{{address}}</text>
			</view>
		</view>
		<!-- 拓展 -->
		<view class="body">
			<view class="list card">
				<view class="item" type="primary" @click="wode()">
					<view class="icon"></view>
					<text>我的活动</text>
				</view>
				<view class="item" type="primary" bindtap="showPopup" @click="collect()">
					<view class="icon"></view>
					<text>我的收藏</text>
				</view>
				<view class="item" type="primary" bindtap="showPopup" @click="history()">
					<view class="icon"></view>
					<text>我的浏览</text>
				</view>
				<view class="item" type="primary" bindtap="showPopup" @click="recruit()">
					<view class="icon"></view>
					<text>招募队员</text>
				</view>
				<!-- <view class="item" type="primary" bindtap="showPopup" @click="side()">
					<view class="icon"></view>
					<text>关注标签</text>
				</view> -->
			</view>
		</view>
		<!-- 退出 -->
		<view class="button">
			<view class="exit" @click="exit()">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'张三',
				address:'岭南师范学院紫荆楼',
				data:'1'
			}
		},
		methods: {
			wode() {
				uni.navigateTo({
					url: './wodehuodong'
				})
			},
			exit() {
				uni.showModal({
					title: "提示",
					content: "确定退出登录？",
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../login/login'
							})
						} else if (res.cancel) {}
					}
				})


			},
			userbind () {
				uni.showActionSheet({
									itemList: [],
									success: function (res) {
										console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
									},
									fail: function (res) {
										console.log(res.errMsg);
									}
								})
			},
			recruit() {
				uni.navigateTo({
					url: './Recruit_teammates'
				})
			},
			collect() {
				uni.navigateTo({
					url: '../collect/Collect'
				})
			},
			history() {
				uni.navigateTo({
					url: '../history/History'
				})
			},
			// side() {
			// 	uni.navigateTo({
			// 		url: '../side/Side'
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.user {
	  position: relative;
	  width: 100%;
	  height: 220px;
	  background-color: #17375e;
	  border-radius: 0 0 30px 30px;
	  box-shadow: 10px 10px 20px 10px  rgba(0, 0, 0, .5);
	}
	
	.user .img {
	  position: absolute;
	  top: 20px;
	  left: 35%;
	  width: 120px;
	  height: 120px;
	  background-color: #fff;
	  border-radius: 60px;
	}
	
	.user  text{
	  position: absolute;
	  top: 150px;
	  left: 45%;
	  width: 200px;
	  height: 20px;
	  color: #fff;
	}
	.user .textIco {
		position: absolute;
		top: 180px;
		left: 5%;
	}
	.user .textAdd {
		position: absolute;
		top: 185px;
		left: 35%;
	}
	.list {
		margin-top: 25rpx;
		padding: 30px 5rpx;

		.item {
			display: flex;
			height: 80rpx;
			padding: 25rpx 15rpx;
			margin: 10px;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			margin: 10px 10px;
			background-color: #fff;
			border-radius: 10px;
			.icon {
				height: 35rpx;
				width: 35rpx;
				margin-right: 30rpx;
				background-size: cover;
			}
	
			&:nth-child(1) .icon {
				background-image: url("data:image/svg+xml,%3Csvg t='1647443235303' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2250' width='200' height='200'%3E%3Cpath d='M78.948443 86.506036c60.372-18.26093 118.866708-38.399152 177.958737-53.460152 94.973903-23.892806 187.430528-5.674541 277.327209 25.172777 101.28843 34.559237 201.894208 48.382932 303.779958 7.509168 36.479194-14.463681 69.161139-38.996472 104.403028-55.977431 14.463681-6.911847 35.199223-13.226375 47.785611-7.551833 8.789139 3.797249 14.463681 28.330041 13.226375 42.793721-8.191819 122.023972-18.900916 244.645264-26.452749 366.626571-1.877292 26.452749-10.026445 45.268334-32.041959 60.372-103.165722 73.598375-217.595195 105.640334-344.013737 91.816639-87.422069-9.429125-171.686875-2.517278-249.679819 41.51375a266.532781 266.532781 0 0 0-40.873764 28.927361c-30.804653 26.410083-44.628348 54.697459-27.64739 98.131166 27.007404 69.801125 46.50564 143.356834 70.398446 215.035252 8.191819 25.172777 6.314527 44.671014-20.095556 52.862832-26.452749 7.509168-36.479194-10.709097-44.031028-32.72461A288037.585837 288037.585837 0 0 0 39.311985 180.199967c-11.306417-35.839209-23.892806-71.678417-35.199222-107.517625-6.314527-19.540902-8.191819-38.399152 15.700986-46.548306 25.172777-8.831805 39.636458 4.39457 47.785612 27.007404 5.077221 11.946403 8.191819 23.892806 11.349082 33.364596z' p-id='2251' fill='%23757575'%3E%3C/path%3E%3C/svg%3E ");
			}
	
			&:nth-child(2) .icon {
				background-image: url("data:image/svg+xml,%3Csvg t='1647601932531' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='17621' width='200' height='200'%3E%3Cpath d='M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z' p-id='17622' fill='%23757575'%3E%3C/path%3E%3C/svg%3E");
			}
	
			&:nth-child(3) .icon {
				background-image: url("data:image/svg+xml,%3Csvg t='1647601812258' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='16712' width='200' height='200'%3E%3Cpath d='M510.557138 204.354248c-302.839283 0-458.323497 306.150702-458.323497 306.150702s117.330242 306.189587 458.323497 306.189587c308.802088 0 458.300984-304.995389 458.300984-304.995389S818.167075 204.354248 510.557138 204.354248L510.557138 204.354248 510.557138 204.354248zM511.245823 701.866279c-110.729917 0-190.772928-83.72589-190.772928-191.364399 0-107.647719 80.049151-191.352119 190.772928-191.352119 110.723777 0 190.763718 83.697237 190.763718 191.352119C702.010565 618.140389 621.970624 701.866279 511.245823 701.866279L511.245823 701.866279 511.245823 701.866279zM511.245823 395.675668c-63.286372 0.145309-114.460892 53.321416-114.460892 114.827235 0 61.473073 51.175543 114.821095 114.460892 114.821095 63.282279 0 114.453728-53.352115 114.453728-114.821095C625.703645 448.975595 574.529125 395.556964 511.245823 395.675668L511.245823 395.675668 511.245823 395.675668z' p-id='16713' fill='%23757575'%3E%3C/path%3E%3C/svg%3E");
			}
	
			&:nth-child(4) .icon {
				background-image: url("data:image/svg+xml,%3Csvg t='1647444704837' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3183' width='200' height='200'%3E%3Cpath d='M965.157847 984.03887H814.104549c9.441023-12.58769 12.58769-25.175379 12.58769-40.909736V732.285079c0-22.028713-3.146667-44.057425-9.441023-62.938448h44.057425c84.96716 0 154.199964 72.379471 154.199964 160.493298v100.701516c0 28.322046-22.028713 53.497425-50.350758 53.497425zM165.838026 260.245186c-0.033769 121.659851 98.56383 220.312708 220.22368 220.346477s220.312708-98.56383 220.346477-220.22368v-0.122797c0-121.659851-98.625228-220.285079-220.285078-220.285079s-220.285079 98.625228-220.285079 220.285079zM725.990722 546.616402c-34.616402-25.175379-56.645115-66.085114-56.645114-113.289206 0-78.672804 62.938448-141.611252 141.611251-141.611251s141.611252 62.938448 141.611252 141.612274-62.938448 141.612275-141.611252 141.612275c-28.322046 0-53.497425-9.441023-75.526137-22.028712-3.145643-3.148713-6.293333-3.148713-9.44-6.29538zM197.306738 574.938448H574.938448c103.848183 0 188.815343 84.96716 188.815343 188.815343v157.346631c0 34.616402-28.322046 62.938448-62.938448 62.938448H71.429843c-34.616402 0-62.938448-28.322046-62.938448-62.938448V763.753791c0-103.848183 84.96716-188.815343 188.815343-188.815343z' p-id='3184' fill='%23757575'%3E%3C/path%3E%3C/svg%3E ");
			}
	
			&:nth-child(5) .icon {
				background-image: url("data:image/svg+xml,%3Csvg t='1647444892227' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4361' width='200' height='200'%3E%3Cpath d='M912.576 614.4l-298.026667 298.048a85.333333 85.333333 0 0 1-120.682666 0L110.933333 518.272a60.629333 60.629333 0 0 1-25.898666-49.621333L85.333333 149.333333a64.64 64.64 0 0 1 63.082667-64.213333L490.496 85.333333a62.848 62.848 0 0 1 50.752 15.253334c-0.533333-0.533333 371.328 393.237333 371.328 393.237333a85.333333 85.333333 0 0 1 0 120.576zM362.666667 266.666667a74.666667 74.666667 0 1 0 74.666666 74.666666 74.666667 74.666667 0 0 0-74.666666-74.666666z m370.432 184.234666a32 32 0 0 0-45.269334 0L461.568 677.184a32 32 0 0 0 45.248 45.248l226.282667-226.282667a32 32 0 0 0 0-45.248z' p-id='4362' fill='%23757575'%3E%3C/path%3E%3C/svg%3E ");
			}
	
			text {
				font-size: 32rpx;
				color: #616161;
			}
	
			&:last-child {
				border: none;
	
			}
		}
	}
	.exit {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		margin: 5rpx 0;
		color: #2196F3;
		text-align: center;
		margin-top: 100rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #eeeeee;
		border-top: 1rpx solid #f3f3f3;
	}
</style>
